@import "../../styles/base";

.HonorRank {
  color: white;
  padding-top: tovw(600);
  background: #00005E url("./images/banner.png") top center / 100% no-repeat;
  min-height: 100vh;
  position: relative;

  main {
    position: relative;
    overflow: hidden;
    padding: 0 tovw(15);
  }

  .tabs {
    margin-bottom: tovw(24);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;

    li {
      width: 50%;
      height: tovw(140);
      font-size: tovw(32);
      color: #00B5FF;
      text-align: center;
      font-weight: 700;
      background: url("./images/tab.png") center center / 100% no-repeat;
      transition: all .2s ease;
      display: flex;
      align-items: center;
      justify-content: center;

      &.active {
        color: white;
        background-image: url("./images/tab-active.png");
      }

      &::before {
        display: none;
      }
    }
  }

  .countdown {
    font-size: tovw(36);
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;

    .time {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: tovw(104);
      height: tovw(66);
      background-image: linear-gradient(143deg, #FFC996 0%, #FF8F3A 100%);
      border: tovw(2) solid rgba(0, 0, 204, 1);
      border-radius: tovw(10);
    }

    .dot {
      margin: 0 tovw(8)
    }
  }

  .last-btn {
    font-size: tovw(24);
    color: #FFFFFF;
    letter-spacing: 0;
    font-weight: 500;
    width: tovw(277);
    height: tovw(64);
    background: url("./images/triAngle.png") center right / tovw(22) no-repeat, linear-gradient(270deg, #3E55E2 2%, #4CD9FF 98%), #3E55E2;
    box-shadow: 0 tovw(2) 0 0 rgba(6, 139, 255, 1);
    border-radius: tovw(100) 0 0 tovw(100);
    position: absolute;
    top: tovw(514);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .return-btn {
    font-size: tovw(24);
    color: #FFFFFF;
    letter-spacing: 0;
    font-weight: 500;
    width: tovw(110);
    height: tovw(64);
    background: linear-gradient(270deg, #3E55E2 2%, #4CD9FF 98%), #3E55E2;
    box-shadow: 0 tovw(2) 0 0 rgba(6, 139, 255, 1);
    border-radius: tovw(100) 0 0 tovw(100);
    border: tovw(1) solid rgba(118, 255, 254, 1);
    position: absolute;
    top: tovw(514);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .refresh-btn {
    width: tovw(80);
    height: tovw(64);
    background: rgba(35, 0, 144, 0.90);
    border: 1px solid rgba(111, 111, 175, 1);
    border-radius: 0 tovw(10) tovw(10) 0;
    position: absolute;
    top: 22vw;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    div {
      width: 100%;
      height: 100%;
      background: url("./images/refresh.png") center center / tovw(36) no-repeat;
    }

    &:active {
      div {
        transform: rotateZ(360deg);
        transition: transform 1s linear;
      }
    }
  }

  .rule-btn {
    font-size: tovw(24);
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
    width: tovw(120);
    height: tovw(64);
    background-color: #D03EE2;
    background-image: linear-gradient(270deg, #D03EE2 2%, #FF4CE8 100%);
    box-shadow: 0 tovw(2) 0 0 rgba(191, 6, 255, 1);
    border-radius: tovw(32) 0 0 tovw(32);
    position: absolute;
    top: tovw(163);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rank-list {
    font-size: tovw(28);
    color: #FFFFFF;
    letter-spacing: 0;
    font-weight: 500;
    margin: tovw(20) auto auto;
    padding-bottom: tovw(40);
    overflow-y: auto;
    height: calc(100% - 50vw);

    .item {
      background: rgba(19, 19, 180, 0.80);
      border-radius: tovw(10);
      margin-top: tovw(20);

      .top {
        display: flex;
        align-items: center;
        padding: tovw(22) 0;
        justify-content: space-between;

        &.top-bottom {
          padding: tovw(14) 0;
        }

        .rank-num {
          width: tovw(70);
          height: tovw(72);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: tovw(36);
          color: #B4B4FF;
          letter-spacing: 0;
          text-align: center;
          font-weight: 500;

          position: relative;

          .online-img {
            width: tovw(40);
            height: tovw(40);
            position: absolute;
            left: 20vw;
            bottom: -2vw;
          }
        }

        .avatar {
          width: tovw(80);
          height: tovw(80);
          border: tovw(2) solid #B4B4FF;
          border-radius: 50%;
          overflow: hidden;
          margin-left: tovw(30);

          img {
            width: 100%;
            height: 100%;
          }
        }

        .user-info {
          flex: 1;
          margin-left: tovw(30);

          .name {
            font-size: tovw(28);
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 500;
            width: 40vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .info {
            font-size: tovw(20);
            color: rgba(255, 255, 255, 0.6);
            letter-spacing: 0;
            font-weight: 400;
          }

          .num {
            height: tovw(40);
            padding-left: tovw(44);
            background: url("./images/start.png") left center / tovw(38) no-repeat;
            font-size: tovw(22);
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 400;
            display: flex;
            align-items: center;
          }
        }

        .look-btn {
          padding-right: tovw(30);

          button {
            font-size: tovw(28);
            color: #17134A;
            letter-spacing: 0;
            font-weight: 500;
            width: tovw(124);
            height: tovw(50);
            background-image: linear-gradient(133deg, #FDF3FF 0%, #FF8BC7 100%);
            border-radius: tovw(10);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            @extend .shine;
          }
        }
      }

      .bottom {
        height: tovw(64);
        border-radius: 0 0 tovw(10) tovw(10);
        background: #00008D;
        display: flex;
        align-items: center;

        .gift-icon {
          background: url("images/gift-icon.png") tovw(120) center / tovw(40) no-repeat;
          width: tovw(190);
          height: tovw(44);
          border-right: tovw(1) solid rgba(255, 255, 255, 0.3);
          margin-right: tovw(20);
        }

        .gift-list {
          display: flex;

          li {
            display: flex;
            align-items: center;
            margin-right: tovw(28);

            img {
              height: tovw(38);
              object-fit: contain;
              margin-right: tovw(8);
              @extend .heartBeat
            }

            span {
              font-size: tovw(22);
              color: #FFFFFF;
              letter-spacing: 0;
              font-weight: 500;
            }
          }
        }
      }

      &.item-rank:nth-of-type(1) {
        background-image: linear-gradient(180deg, #FF388F 0%, #233AFF 100%), linear-gradient(90deg, #FF48BF 0%, rgba(97, 26, 105, 0.00) 48%), linear-gradient(90deg, rgba(26, 35, 105, 0.00) 50%, #D433D1 100%);

        .rank-num {
          background: url("./images/top-1.png") center center / 100% no-repeat;
        }

        .avatar {
          border-color: #FFC7B4;
        }

        .bottom {
          background: rgba(71, 0, 195, 0.6);
        }
      }

      &.item-rank:nth-of-type(2) {
        background-image: linear-gradient(180deg, #4CEBFF 0%, #003487 100%), linear-gradient(90deg, rgba(26, 35, 105, 0.00) 50%, #1A2369 100%), linear-gradient(90deg, #1A2369 0%, rgba(26, 35, 105, 0.00) 50%);

        .rank-num {
          background: url("./images/top-2.png") center center / 100% no-repeat;
        }

        .avatar {
          border-color: #FCA1FF;
        }

        .bottom {
          background: rgba(0, 111, 163, 0.6);
        }
      }

      &.item-rank:nth-of-type(3) {
        background-image: linear-gradient(0deg, #00725A 14%, #7BFFCA 100%), linear-gradient(90deg, #1A2369 0%, rgba(26, 35, 105, 0.00) 50%), linear-gradient(90deg, rgba(26, 35, 105, 0.00) 50%, #1A2369 100%);

        .rank-num {
          background: url("./images/top-3.png") center center / 100% no-repeat;
        }

        .avatar {
          border-color: #736DFF;
        }

        .bottom {
          background: rgba(0, 94, 150, 0.6);
        }
      }

      &.item-self {
        display: flex;
        position: fixed;
        z-index: 10;
        bottom: 0;
        left: 0;
        width: 100%;
        height: tovw(140);
        background-image: linear-gradient(180deg, #0074C4 0%, #192A8A 100%);
        box-shadow: inset 0 tovw(2) 0 0 rgba(106, 183, 255, 1);
        border-radius: tovw(20) tovw(20) 0 0;

        .top {
          .user-info div {
            display: flex;
            flex-direction: row;
          }

          .rank-num {
            font-size: tovw(32);
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            font-weight: 500;
            margin-left: tovw(24);
          }

          .num {
            display: inline-flex;
            margin-left: tovw(30);
          }
        }
      }
    }

    .more {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: tovw(26);
      color: #FFFFFF;
      font-weight: 700;
      padding-top: tovw(30);

      img {
        width: tovw(38);
        height: tovw(38);
        margin-right: tovw(12);
        animation: rotateMore 1.5s linear infinite;
      }
    }
  }

  .rank-list-1 {
    padding-bottom: 25vw;
  }

  &.HonorRank-last {
    .rank-list {
      padding-bottom: 5vw;

      .item.item-rank {
        background: rgba(19, 19, 180, 0.80);
      }
    }
  }
}


.heartBeat {
  animation: heartBeat 2s ease-in-out infinite;
}

.shine {
  overflow: hidden;

  &:after {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shineAni 3s ease-in-out infinite;
  }
}

@keyframes shineAni {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.1);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.1);
  }

  70% {
    transform: scale(1);
  }
}

@keyframes rotateMore {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
